<%-- 
  -- Body para mostrar opciones de busqueda de Debt.
  --
  -- Usa debt.js para muchas funciones.
  --
  -- @author nicolas.gonzalez
--%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<%@ taglib uri="/WEB-INF/struts-html-el-1.2.8.tld" prefix="html-el"%>
<%@ taglib uri="/WEB-INF/struts-logic-el-1.2.8.tld" prefix="logic-el"%>
<%@ taglib uri="/WEB-INF/security.tld" prefix="security" %>
<%@ taglib uri="/WEB-INF/ajaxtags.tld" prefix="ajax" %>

<%@ taglib uri="http://struts.apache.org/tags-bean-el" prefix="bean2"%>

<script src="<html:rewrite page='/protected/script/util.js'/>" type="text/javascript"></script>

<script src="<html:rewrite page='/protected/script/calendar/calendar.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/calendar/calendar-setup.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/calendar/lang/calendar-es.js'/>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/script/calendar/style/calendar-blue.css'/>" id="styleFileAnyId"/>

<%-- Para EXT --%>
<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/script/ext-1.1.1/resources/css/ext-all.css'/>" />

<script src="<html:rewrite page='/protected/script/ext-1.1.1/adapter/ext/ext-base.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ext-1.1.1/ext-all.js'/>" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/style/dragdrop.css'/>" id="styleFileDragDrop"/>
<!-- Para AjaxTags -->
<script src="<html:rewrite page='/protected/script/scriptaculous/scriptaculous.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags_parser.js'/>" type="text/javascript"></script>
<script src="<html:rewrite page='/protected/script/ajaxtags/ajax/ajaxtags_controls.js'/>" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="<html:rewrite page='/protected/style/ajaxtags/ajaxtags.css'/>" id="AjaxTagsCssId"/>

<%-- Funcionalidad de manejo de Ajax + JSON + Divs flotantes y esas cosas... --%>
<script src="<html:rewrite page='/protected/script/debt.js'/>" type="text/javascript"></script>

<div class="errors">
    <html:errors />
</div>


<script type="text/javascript">
    /* Busca las deudas 
     */
    var findDebts = function() {
        if (!Util.valid.isBlank($("studentId").value)) {
            // Se eligio pero puede haber sido modificado en ese caso se invalida.
            var oldStudentSurname = $("hiddenAutoCompleteSurnameId").value; 
            var actualStudentSurname = $("studentSurnameId").value; 
            
            if (oldStudentSurname != actualStudentSurname) {
                // Se modifico  => limpio todo y alerto
                $("hiddenAutoCompleteId").value = "";
                $("hiddenAutoCompleteSurnameId").value = "";
                $("studentSurnameId").value = "";
                Ext.MessageBox.alert('Error', 'Por favor, no modifique el campo de participante una vez que lo elige de la lista ... ');
                $("studentSurnameId").focus();
                return;
            }
        }
    
        $("studentIdFindId").value = $("studentId").value;   
    
        $("validityFromFindId").value = $("validityFromId").value;   
        $("expiryFindId").value = $("expiryId").value;   
        
        var debtTypeSelectedObj = $("debtTypeSelectedId");
        var debtTypeSelectedValue = debtTypeSelectedObj.options[debtTypeSelectedObj.selectedIndex].value;
        if (debtTypeSelectedValue != "-1") {
            // -1 = todos
            $("debtTypeSelectedFindId").value = debtTypeSelectedValue;
        }
        else {
        	$("debtTypeSelectedFindId").value = "";
        }
        
        var debtStatusSelectedObj = $("debtStatusSelectedId");
        var debtStatusSelectedValue = debtStatusSelectedObj.options[debtStatusSelectedObj.selectedIndex].value;
        if (debtStatusSelectedValue != "-1") {
            // -1 = todos
            $("debtStatusSelectedFindId").value = debtStatusSelectedValue;   
        }
        else {
        	$("debtStatusSelectedFindId").value = ""; 
        }

        var courseSelectedObj = $("courseSelectedId");
        var courseSelectedValue = courseSelectedObj.options[courseSelectedObj.selectedIndex].value;
        if (courseSelectedValue != "-1") {
            // -1 = todos
            $("courseSelectedFindId").value = courseSelectedValue;   
        }
        else {
        	$("courseSelectedFindId").value = ""; 
        }
        
    
        var form = $("findDebtsByConditionsFormId");
        form.submit();
    }
    
    // Decora los titles de HTML. Lo hace mas lindo, pero mas pesado...
    Ext.QuickTips.interceptTitles = true;
    Ext.QuickTips.init();
</script>

<%-- El ID del form NO debe ser modificado. Se usa desde el menu --%>
<html:form action="/protected/showFindDebtsByCondition" styleId="debtFormId">
    
    <h2>Consulta de Deudas</h2>
    
    <div class="debtOptions">
        <table class="tableDataDebt" cellspacing="0">
            <tr>
                <td class="tableDataTitle">
                    Participante
                </td>
                <td class="tableDataValue">
                    <html:text property="studentSurname" styleId="studentSurnameId" styleClass="form-autocomplete" size="30" title="Ingrese el apellido y espere a que se carguen los resultados ..." />
                    <%--    En studentId esta el ID cuando se autocompleta luego del post-function. 
                            En hiddenAutoCompleteId esta lo q vino del autocomplete como auxiliar --%>
                    <html:hidden property="studentId" styleId="studentId"/>
                    <input type="hidden" name="hiddenAutoComplete" id="hiddenAutoCompleteId" />
                    <input type="hidden" name="hiddenAutoCompleteSurname" id="hiddenAutoCompleteSurnameId" />
                </td>   
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Curso
                </td>
                <td class="tableDataValue">
                    <html:select property="courseSelected" styleClass="allSelects" styleId="courseSelectedId" title="Cursos ..." >
                        <option value="-1">Todos</option>
                        <html:optionsCollection property="courseOptions"/>
                    </html:select>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Vigencia Desde
                </td>
                <td class="tableDataValue">
                    <html:text property="validityFrom" styleId="validityFromId" readonly="true" title="Seleccione una fecha pulsando el boton a su derecha. Las deudas deberan tener fecha desde mayor o igual a la ingresada ..."/>
                    &nbsp;
                    <img id="validityFromImgId" style="border: 0px;" src="<html:rewrite page="/protected/img/date.png"/>" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Vencimiento
                </td>
                <td class="tableDataValue">
                    <html:text property="expiry" styleId="expiryId" readonly="true" title="Seleccione una fecha pulsando el boton a su derecha. Las deudas deberan tener vencimiento menor o igual a la ingresada ..."/>
                    &nbsp;
                    <img id="expiryImgId" style="border: 0px;" src="<html:rewrite page="/protected/img/date.png"/>" />
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Tipo de deuda
                </td>
                <td class="tableDataValue">
                    <html:select property="debtTypeSelected" styleClass="allSelects" styleId="debtTypeSelectedId" title="Tipo de deuda ..." >
                        <option value="-1">Todas</option>
                        <html:optionsCollection property="debtTypeOptions"/>
                    </html:select>
                </td>            
            </tr>
            <tr>
                <td class="tableDataTitle">
                    Estado
                </td>
                <td class="tableDataValue">
                    <html:select property="debtStatusSelected" styleClass="allSelects" styleId="debtStatusSelectedId" title="Estado de la deuda ..." >
                        <option value="-1">Todos</option>
                        <html:optionsCollection property="debtStatusOptions"/>
                    </html:select>
                </td>            
            </tr>
            
        </table>

        <script type="text/javascript">
            Calendar.setup({
              inputField    : "validityFromId",
              button        : "validityFromImgId",
              align         : "Tr",
              ifFormat      : "%d/%m/%Y"
            });

            Calendar.setup({
              inputField    : "expiryId",
              button        : "expiryImgId",
              align         : "Tr",
              ifFormat      : "%d/%m/%Y"
            });
          </script>        
    
        <div id="clear">
        </div>
        <div id="clear">
        </div>
        
        <%-- No se valida seguridad ya que SOLO entran aca los q tienen permiso --%>
        <div class="panelButton">
              <input type="button" value="Buscar" onclick="findDebts();" title="Busca las deudas aplicando las condiciones ingresadas ..." class="button">
        </div>  
    
    </div>

    <%-- Indicador de llamada de AJAX para el autocomplete --%>
    <span id="indicatorRegion" style="display: none; margin-left: 50%;">
        <img id="pepepepep" style="border: 0px;" title="title" src="<html:rewrite page="/protected/img/ajax-loader.gif"/>" />
    </span>


</html:form>

<ajax:autocomplete
  baseUrl="${pageContext.request.contextPath}/protected/autocompleteStudents.do"
  source="studentSurnameId"
  target="hiddenAutoCompleteId"
  parameters="studentSurname={studentSurnameId}"
  className="autocomplete"
  indicator="indicatorRegion"
  minimumCharacters="2"
  postFunction="postAutoComplete"
/>

<%-- Inyectados por Javascript --%>
<div id="findDivId" class="hideClass">
    <html:form action="/protected/findDebtsByConditions" styleId="findDebtsByConditionsFormId">
        <html:hidden property="studentId" value="" styleId="studentIdFindId" />
        <html:hidden property="courseSelected" value="" styleId="courseSelectedFindId" />
        <html:hidden property="validityFrom" value="" styleId="validityFromFindId" />
        <html:hidden property="expiry" value="" styleId="expiryFindId" />
        <html:hidden property="debtTypeSelected" value="" styleId="debtTypeSelectedFindId" />
        <html:hidden property="debtStatusSelected" value="" styleId="debtStatusSelectedFindId" />
    </html:form>
</div>